<template>
    <div>

        <mh></mh>

      <main class="" id="main-collapse">
        <div>


          课程详情页

          <input type="text"  />

          <button class="h-btn">默认</button>

          <h-switch>测试</h-switch>

          <div>
              <Form
        ref="form"
        :showErrorTip="showErrorTip"
        :rules="rules"
        :model="model"
      >
        <FormItem label="用户名" prop="name">
          <template v-slot:label>  用户名 </template>
          <input type="text" v-model="model.name">
        </FormItem>
        <FormItem label="密码"  prop="password">
          <input type="password" v-model="model.password">
        </FormItem>
        <FormItem>
          <Button color="primary" :loading="isLoading" @click="submit">提交</Button>&nbsp;&nbsp;&nbsp;
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>

            </div>


        </div>

      </main>





    </div>
  </template>



  <script>


  import mh from './mh.vue'

  export default {
    data () {
      return {
        msg: "这是一个变量",
        isLoading: false,
        model: {
          username: '',
          password: ''
        },
        rules: {
          required: ['username', 'password']
        },
        showErrorTip: true,
      }
    },
    components: {
          'mh':mh
    },
    mounted:function(){

  },
    methods:{

        submit() {
        this.isLoading = true;
        let re = this.$refs.form.valid();
        if (re.result) {



          this.$Message('验证成功');

          setTimeout(() => {
            this.isLoading = false;
          }, 1000);

        } else {
          this.isLoading = false;
        }
      },
      reset() {
        this.model.username = '';
        this.model.password = '';
      }
    }
  }


  </script>

  <style>



  </style>
